<template>
  <el-dialog title="缴纳罚款" :close-on-click-modal="false" v-model="visible" width="305px" center>
    <img alt="" :src="qrCode" class="qrcode" v-if="!result"/>
    <div v-if="result" class="pay-success">
      <el-result icon="success" title="付款成功" subTitle="请根据提示进行操作"></el-result>
    </div>
    <div class="dialog-footer-style">
      <el-button type="danger" size="medium" v-if="!result" @click="cancelHandle">取消支付</el-button>
      <el-button type="primary" size="medium" v-if="!result" @click="successHandle">支付成功</el-button>
      <el-button type="primary" size="medium" v-if="result" @click="closeHandle">关闭窗口</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data: function () {
    return {
      visible: false,
      dataForm: {
        id: null
      },
      result: false,
      qrCode: null
    };
  },
  methods: {
    init(id) {
      this.visible = true;
      this.dataForm.id = id;
      this.result = false;

      this.$nextTick(() => {
        // 从浏览器Cookie获取Token
        let token = this.$cookies.get("token");
        // 向WebSocket服务类发送消息，让服务类缓存Session对象，可以推送消息给当前页面
        this.$socket.sendObj({
          opt: "pay_amect",
          token
        })
        // 接收服务端推送的消息
        this.$options.sockets.onmessage = (resp) => {
          console.log(resp, '接收服务端推送的消息');
          let data = resp.data;
          if (data === '收款成功') {
            this.result = true;
          }
        }

        this.$http("amect/createNativeAmectPayOrder", "POST", {amectId: id}, true, resp => {
          if (resp.code === 200 && resp.qrCodeBase64 != null) {
            this.qrCode = resp.qrCodeBase64;
          }
        })
      })
    },
    closeHandle() {
      this.visible = false;
      this.$emit("refreshDataList");
    },
    cancelHandle() {
      this.visible = false;
    },
    successHandle() {
      this.visible = false;
      this.$http("amect/searchNativeAmectPayResult", "POST", {amectId: this.dataForm.id}, true, resp => {
        if (resp.code === 200) {
          this.$emit("refreshDataList");
        }
      })
    }
  }
};
</script>

<style scoped>
.pay-success {
  width: 255px;
  height: 255px;
}

.dialog-footer-style {
  padding-bottom: 30px;
  padding-top: 10px;
  text-align: center;
}
</style>
